import styled from "styled-components";

export const TopBannerWrapper = styled.div `
    background: url(${props => props.bgImage}) center center/6000px;
    .banner {
        height: 270px;
        display: flex;
        position: relative;
    }
`

export const TopBannerLeft = styled.div `
    width: 730px;
    .banner-item {
    overflow: hidden;
    height: 270px;
    .image {
        width: 100%;
    }
}

`

export const TopBannerRight = styled.a.attrs({
    href: "https://music.163.com/#/download",
    target: "_blank"
})
`
    width: 254px;
    height: 270px;
    background:url(${require("@/assets/img/download.png")})

`

export const TopBannerControl = styled.div`
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    .btn {
        position: absolute;
        width: 37px;
        height: 63px;
        background-image: url(${require("@/assets/img/banner_sprite.png")});
        background-color: transparent;
        cursor: pointer;
        &:hover {
            background-color: rgba(0,0,0,.1);
        }
    }
    .left {
        left: -68px;
        background-position: 0 -360px;
        }

    .right {
        right: -68px;
        background-position: 0 -508px;
    }
`